<template>
	<div class="backStage">
		<!-- 外层容器 -->
		<el-container>
			<!-- 顶栏容器 -->
			<el-header>
				<!-- logo -->
				<div class="header_logo  ">
					<img src="/api/ico/logo.ico" alt="logo" />
					<span class="shs_title">社会数</span>
				</div>

				<div class="header_main" v-if="usermenu_flag">
					<el-dropdown @command="userinfo_command" trigger="hover">
						<el-link href="javascript:;" :underline="false"
							:title="userinfo.username">{{ userinfo.username }}<i
								class="el-icon-user-solid"></i></el-link>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="personalcenter">个人中心</el-dropdown-item>
							<el-dropdown-item command="exit">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

					<!-- <el-link href="javascript:;" :underline="false" title="系统设置"
            ><i class="el-icon-s-tools"></i
          ></el-link> -->
					<el-link href="/" :underline="false" title="博客首页"><i class="el-icon-s-home"></i></el-link>
				</div>
			</el-header>
			<el-container>
				<!-- 侧边栏 -->
				<el-aside>
					<!-- 菜单栏 -->
					<el-menu :default-active="list_ishow_two" mode="vertical" :collapse="is_collapse">
						<el-submenu :key="data.z_id" :index="data.z_id" v-for="data in breadcrumb">
							<template slot="title">
								<span>{{ data.name }}</span>
							</template>
							<el-menu-item @click="menu_item(item.z_id)" v-text="item.name" :key="item.z_id"
								:index="item.z_id" v-for="item in data.breadcrumb_item"></el-menu-item>
							<!-- <el-menu-item
                v-text="item.name"
                :key="item.z_id"
                :index="item.path"
                @click="menu_item(item.z_id)"
                v-for="item in data.breadcrumb_item"
              ></el-menu-item> -->
						</el-submenu>
					</el-menu>
				</el-aside>
				<!-- 主要区域容器 -->
				<el-main>
					<!-- 面包屑导航栏 -->
					<el-breadcrumb :key="data.z_id" v-for="data in breadcrumb_list">
						<el-breadcrumb-item @click.native="click_shouye">首页</el-breadcrumb-item>
						<template v-for="item in data.breadcrumb_item">
							<el-breadcrumb-item @click.native="menu_item(item.z_id)" :to="{ path: item.path }"
								:key="item.z_id" v-if="item.z_id == list_ishow_two">
								<!-- {{ list_ishow_two }}//{{ item.z_id }} -->
								<span class="breadcrumb_item_show">{{ data.name }}
								</span>{{ item.name }}</el-breadcrumb-item>
						</template>
					</el-breadcrumb>
					<!-- --{{ breadcrumb_list[0].path }}-- -->
					<!-- 路由插槽 --后台	 -->
					<router-view @login_isok="login_isok"></router-view>
				</el-main>
				<el-dialog class="login_hint" title="退出提示" :visible.sync="is_exit_dialog" width="400px" center>
					<span>是否切换账号？</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="exit_confirm">直接退出</el-button>
						<el-button type="primary" @click="exit_cancel">确 定</el-button>
					</span>
				</el-dialog>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	// import { userLogin } from "@/request/api2";
	export default {
		name: "backStage",
		data() {
			return {
				loginflag: false, //登录模块的显隐
				usermenu_flag: false, //用户设置，用户名提示 默认隐藏
				is_exit_dialog: false /*用户退出询问是否切换账号的显隐*/ ,
				userinfo: {
					username: "admin"
				}, //用户信息
				list: [], //文章列表
				//主要区域显示的内容
				is_collapse: false, //是否折叠菜单栏
				breadcrumb_list: [], //面包屑
				list_ishow_one: "0", //一级菜单第几个显示
				list_ishow_two: "00", //二级菜单第几个显示
				breadcrumb: [{
						name: "文章管理",
						path: "/backStage/classlist",
						z_id: "0",
						breadcrumb_item: [{
								name: "分类管理",
								path: "/backStage/classlist",
								z_id: "00",
							},
							{
								name: "标签管理",
								path: "/backStage/tagList",
								z_id: "01",
							},
							{
								name: "文章管理",
								path: "/backStage/article_item",
								z_id: "02",
							},
						],
					},
					{
						name: "友情链接",
						z_id: "1",
						path: "/backStage/blogroll",
						breadcrumb_item: [{
							name: "详情",
							z_id: "10",
							path: "/backStage/blogroll",
						}, ],
					},
					{
						name: "用户管理",
						z_id: "2",
						path: "/backStage/user_information",
						breadcrumb_item: [{
							name: "个人信息",
							z_id: "20",
							path: "/backStage/user_information",
						}, ],
					}
				], //列表
			};
		},
		/**挂载 */
		mounted() {
			//  -------------------------------------测试
			// console.log("测试");
			// userLogin({username:"admin",password:'123456'}).then(data=>{
			//   console.log("kaoyaola",data);
			// }).catch(err=>{
			//   console.log("靠背啦",err);
			// })
			// console.log("测试");
			//  -------------------------------------测试
			// 
			//获取用户信息
			//初始化面包屑
			this.init();

			/**获取用户名称 有则赋值 */
			this.userinfo.username =
				JSON.parse(localStorage.getItem("userinfo"))?.userName || "admin";
			if (JSON.parse(localStorage.getItem("userinfo"))?.userName) {
				this.usermenu_flag = true;
			}
		},
		methods: {
			/*登录main 传递过来的 */
			login_isok(data) {
				console.log("data传递过来的", data);
				this.usermenu_flag = true;
			},
			/*点击用户中心 跳转到用户中心 */
			userinfo_command(com) {
				// console.log("com",com);
				if (com == "personalcenter") {
					this.breadcrumb_list = this.breadcrumb[2]?.breadcrumb_item; //面包屑
					this.list_ishow_two = "20"; //清空菜单栏
					this.$router.push({
						path: "/backStage/user_information"
					});
				} else if (com == "exit") {
					this.is_exit_dialog = true;
				}
			},
			//直接退出账号
			exit_confirm() {
				localStorage.removeItem("userinfo"); //清空用户数据
				localStorage.removeItem("usertoken"); //清空token
				this.breadcrumb_list = []; //清空面包屑
				this.list_ishow_two = '-1';
				this.is_exit_dialog = false; //隐藏
				this.usermenu_flag = false;
				this.userinfo = {}
				this.$router.push({
					path: "/"
				});
			},
			//跳转到登录页
			exit_cancel() {
				this.breadcrumb_list = []; //清空面包屑
				this.list_ishow_two = "-1"; //清空菜单栏
				localStorage.removeItem("userinfo"); //清空用户数据
				localStorage.removeItem("usertoken"); //清空token
				this.$router.push({
					path: "/managelogin"
				});
				// this.loginflag=true;
				this.is_exit_dialog = false; //隐藏
				this.usermenu_flag = false;
			},
			//默认页 刷新 处理刷新会跳转到默认页的问题
			init() {
				console.log("window.location.href", window.location.href);
				let url = window.location.href.split("/"); //url地址

				//获取
				let base_u = url[url.length - 1];
				if (base_u.toString().indexOf("?") > -1) {
					//有参数的情况
					base_u = base_u.split("?")[0];
				}
				//是/backStage 跳转到 /backStage/main
				if (base_u == "backStage" || base_u == "") {
					this.breadcrumb_list = []; //清空面包屑的显示列表
					this.breadcrumb_list.push(this.breadcrumb[0]); //默认赋值第一个一级菜单
					this.list_ishow_two = "-1";
					this.$router.push({
						path: "/backStage/classlist",
					});
					return;
				} else {
					base_u = "/backStage/" + base_u;
				}
				//初始化面包屑
				this.breadcrumb_list = []; //清空面包屑的显示列表
				let _this = this;
				let flag = 0;
				for (let i = 0; i < this.breadcrumb.length; i++) {
					for (let j = 0; j < _this.breadcrumb[i].breadcrumb_item.length; j++) {
						if (_this.breadcrumb[i].breadcrumb_item[j].path == base_u) {
							this.breadcrumb_list = []; //清空面包屑的显示列表
							this.breadcrumb_list.push(this.breadcrumb[i]); //赋值第一个一级菜单
							this.list_ishow_two = _this.breadcrumb[i].breadcrumb_item[j].z_id;
							flag = 1;
							break;
						}
					}
				}
				if (flag != 1) {
					this.breadcrumb_list.push(this.breadcrumb[0]); //默认赋值第一个一级菜单
					this.list_ishow_two = "-1";
				}
			},
			//二级菜单栏 点击事件
			menu_item(z_id) {
				// console.log("二级菜单");
				this.breadcrumb_list = []; //清空面包屑的显示列表
				//截取字符串 0 一级菜单 1二级菜单
				let arr = z_id.split("");
				this.breadcrumb_list.push(this.breadcrumb[arr[0]]); //重新赋值
				this.list_ishow_one = arr[0]; //赋值一级菜单的index
				this.list_ishow_two = z_id; //赋值二级菜单的index
				this.$router.push({
					path: this.breadcrumb_list[0].breadcrumb_item[arr[1]].path,
				});
			},
			// 一级菜单点击事件*
			show_explain(z_id) {
				console.log("一级菜单点击事件", z_id);
			},
			//点击首页 把面包屑 清空
			click_shouye() {
				//清空显示的列表
				this.breadcrumb_list[0] = [];
				this.list_ishow_two = "0";
				this.$router.push({
					path: "/backStage/main",
				});
			},
		},
		components: {
			// categoryList: () => import("@/components/categoryList.vue"),
		},
	};
</script>

<style scoped>
	html,
	body,
	#app,
	.el-container {
		height: 100vh;
		margin: 0;
		padding: 0;
	}

	.el-header {
		min-width: 250px;
		line-height: 60px;
		/* background-color: #bbadd4; */
		background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
		display: flex;
		justify-content: space-between;
	}

	.header_main {
		display: flex;
		justify-content: space-evenly;
	}

	.header_main .el-link {
		margin: 0 8px;
	}

	.el-aside,
	.el-menu {
		/* background-color: #545c64; */
		/* background-color: #007070; */
		background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
	}

	.el-submenu__title,
	.el-menu-item {
		color: #000000;
	}

	/* 大菜单 */
	.el-submenu__title:hover {
		background-color: #6d7781;
		/* background-color: #bbadd4; */
	}

	.breadcrumb_item_show::after {
		content: "/";
		display: inline;
		margin: 0 9px;
		font-weight: 700;
		color: #c0c4cc;
	}

	/* 焦点态 */
	.el-menu-item:focus {
		background-color: #a6a6a6;
	}

	.el-menu-item:hover {
		background-color: #7d8894;
		background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%);
	}

	.el-main {
		height: auto;
		background: #e0ffff;
		background-color: #fff;
		/* background-color: #bbadd4; */
	}

	/*右上角 用户名称图标 */
	.el-icon-user-solid {
		margin: 0 6px;
	}

	/*用户退出询问是否切换账号的显隐的对话框* */
	.login_hint {
		top: 15%;
	}

	.header_logo {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.header_logo img {
		height: 100%;
		opacity: 0.9;

	}

	.shs_title {
		/* color: red; */
		position: relative;
		margin-left: 12px;
	}

	.shs_title::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		width: 130%;
		height: 50%;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	}
</style>